<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('训练包选择')"/>
    <th:block th:include="include :: select2-css"/>
    <style>
        .popover-show{
            cursor: pointer;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="col-sm-12 search-collapse">
        <form id="data-form">
            <input id="childCourseId" name="childCourseId" th:value="*{childCourseId}" hidden="true">
            <input id="classPlanId" name="classPlanId"  hidden="true">
            <input id="classTimes" name="classTimes"  hidden="true">
            <div class="select-list">
                <ul>
                    <li>
                        <label style="margin-right: 15px;width: 85px">训练包选择: </label>
                        <select name="trainPackageId" id="trainPackageId"  style="margin-right: 25px" onchange="loadSubject()">
                            <option value="" selected>请选择</option>
                        </select>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" class="table-hover"></table>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<script th:inline="javascript">
    // 权限

    // 字典

    var prefix = ctx + "business/prepareClass";
    var i =0;
    $(function () {
        $.ajax({
            url: prefix + "/getCheckTrainPackage/"+$("#childCourseId").val(),
            type: "get",
            success: function (result) {
                // console.log(result);
                if (result.data.list.length >0){
                    var html ="";
                    var exists =[];
                    for(var i in result.data.list){
                        var obj = result.data.list[i];
                        if(exists.indexOf(obj.id)>-1){
                            continue;
                        }
                        if(obj.parentTrainId=="0"){
                            html+='<optgroup label="--' + obj.trainName + '--">';
                            exists.push(obj.id);
                            for(var j in result.data.list){
                                var child = result.data.list[j];
                                if(obj.id==child.parentTrainId){
                                    html+="<option value=\""+child.id+"\" >"+child.trainName+"</option>";
                                    exists.push(child.id);
                                }
                            }
                            html+='</optgroup>';
                        }else {
                            html+="<option value=\""+obj.id+"\" >"+obj.trainName+"</option>";
                        }

                    }
                    $("#trainPackageId").append(html);
                }
                $("#classPlanId").val(result.data.classPlanId);
                $("#classTimes").val(result.data.classTimes);
            }
        })


        var options = {
            url: ctx + "business/trainPackageProject/listByCourse",
            modalName: "数据",
            toolbar:false,
            singleSelect:true,
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'id',
                    title: '序号',
                },
                {
                    field: 'subjectName',
                    title: '题库名称',
                    formatter: function (value, row, index) {
                        i++;
                        if(row.trainCount >0){
                            return value+i+"(已训练"+row.trainCount+"次)";
                        }
                        return value+i;
                    }

                },
                {
                    field: 'projectName',
                    title: '项目名称/项目类型',
                    formatter: function (value, row, index) {
                        var action='';
                        // var a =row.completeInfo.replaceAll('|','<br>');
                        var a =row.completeInfo.replace(new RegExp("\\|","g"), "<br>");
                        if(a==null||a==""){
                            a="暂无训练记录";
                        }
                        value=value.replace('|','<br>');
                        action+='<span  class="popover-show" data-toggle="popover" data-html="true" data-content=\"'+a+'\" >'+value+'</span>';
                        return action;
                    }
                },
                {
                    field: 'projectCode',
                    title: '项目编号',
                    visible: false
                },
                {
                    field: 'completeInfo',
                    title: '完成次数',
                    visible: false

                }
            ]
        };
        $.table.init(options);
    });
    $(document).on('hover', '.popover-show', function (e) {
        if (e.type == 'mouseenter') {
            $('.popover-show').popover('show');
        } else {
            $('.popover-show').popover('hide');
        }
    });

    function loadSubject() {
        i=0;
        $.table.refresh();
    }

    function submitHandler() {
        var rows = $.table.selectFirstColumns();
        var projectCode = $.table.selectColumns('projectCode');
        if (rows.length == 0) {
            $.modal.alertWarning("请至少选择一条记录");
            return;
        }
        var reqData={
            "trainPackageProjectId":rows[0],
            "childCourseId":$("#childCourseId").val(),
            "classPlanId":$("#classPlanId").val(),
            "classTimes":$("#classTimes").val(),
            "projectCode":projectCode[0],
            "trainPackageId":$("#trainPackageId").val()
        }
        $.ajax({
            url: prefix + "/saveTrainPackage",
            type: "post",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(reqData),
            success: function (result) {
                $.operate.successCallback(result);
            }
        })


    }
    function updateStatus(id,status) {
        var reqData={
            "id":id,
            "status":status
        }
        $.ajax({
            url: prefix + "/updateStatus",
            type: "post",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(reqData),
            success: function (result) {
                $.table.refresh();
            }
        })

    }
</script>
</body>

</html>